import { Button } from 'antd';
import type React from 'react';
import { useState } from 'react';
import {
  attachMarker,
  detachMarker,
} from '@/components/MapView/Mapless/mana/marker';
import styles from '../../index.module.less';
import type { TestControlProps } from '../types';

const Index: React.FC<TestControlProps> = ({ maplessRef }) => {
  const onDrawMarker = () => {
    const mMan1 = attachMarker(maplessRef.current, 'mM1');
    mMan1?.addMarker('guangzhou', [113.267, 23.132], {
      icon: 'center',
      popup: '<h3 style="color:red">广州站</h3>',
    });
    mMan1?.addMarker('portable', [113.273, 23.135], {
      icon: 'monaloading',
      popup: '<h3>测试gif</h3>',
    });
  };

  const onClearMarker = () => {
    detachMarker(maplessRef.current, 'mM1');
  };

  const [testState, setTestState] = useState(0);
  const onTestState = () => {
    setTestState(testState + 1);
  };

  return (
    <div className={styles.test}>
      <Button onClick={onDrawMarker}>添加信标</Button>
      <Button onClick={onClearMarker}>删除信标</Button>
      <Button onClick={onTestState}>Test State</Button>
    </div>
  );
};

export default Index;
